<template>
<div>
    <div>
        <el-form :inline="true"  class="demo-form-inline" size="small" label-position="right">
            <div>
                <el-row :gutter="20">
                    <el-col :span="7" :offset="1" class="grid-content bg-purple">
                        <el-form-item label="订单编号">
                            <el-input v-model="input" placeholder="订单编号" class="inp" size="small"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="7" :offset="1">
                        <div class="grid-content bg-purple">
                            <el-form-item label="订单类型" >
                                <el-select v-model="from.re" placeholder="全部" size="small">
                                    <el-option label="全部" value="shanghai"></el-option>
                                    <el-option label="普通单" value="beijing"></el-option>
                                    <el-option label="预约单" value="shenzhen"></el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="7" :offset="1"><div class="grid-content bg-purple">
                        <el-form-item label="业务类型" >
                            <el-select v-model="from.rs" placeholder="全部" size="mini">
                                <el-option label="全部" value="shanghai"></el-option>
                                <el-option label="取车订单" value="beijing"></el-option>
                                <el-option label="送车订单" value="shenzhen"></el-option>
                                <el-option label="代驾" value="hebei"></el-option>
                            </el-select>
                        </el-form-item>
                    </div></el-col>
                </el-row>
            </div>
            <el-collapse-transition>
                <div v-if="isshows">
                    <el-row :gutter="20">
                        <el-col :span="7" :offset="1">
                            <div class="grid-content bg-purple">
                                <el-form-item label="订单类型" >
                                    <el-select v-model="from.rd" placeholder="全部" size="mini">
                                        <el-option label="全部" value="shanghai"></el-option>
                                        <el-option label="已创建" value="beijing"></el-option>
                                        <el-option label="待接单" value="shenzhen"></el-option>
                                        <el-option label="已取消" value="shenzhen"></el-option>
                                        <el-option label="已超时" value="shenzhen"></el-option>
                                        <el-option label="已接单" value="shenzhen"></el-option>
                                        <el-option label="已到达" value="shenzhen"></el-option>
                                        <el-option label="开始服务" value="shenzhen"></el-option>
                                        <el-option label="结束服务" value="shenzhen"></el-option>
                                        <el-option label="已完成" value="shenzhen"></el-option>
                                        <el-option label="已验车" value="shenzhen"></el-option>
                                    </el-select>
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="8" push="1" class="grid-content bg-purple">
                            <el-form-item label="下单人手机号">
                                <el-input v-model="input" placeholder="下单人手机号" class="inp" size="mini"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="7" :offset="1"><div class="grid-content bg-purple">
                            <el-form-item label="创建时间" >
                                <template>
                                    <div class="block">
                                        <el-date-picker
                                                v-model="value1"
                                                type="daterange"
                                                range-separator="至"
                                                start-placeholder="开始日期"
                                                end-placeholder="结束日期"
                                                size="mini">
                                        </el-date-picker>
                                    </div>
                                </template>
                            </el-form-item>
                        </div></el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="7" :offset="1"><div class="grid-content bg-purple">
                            <el-form-item label="更新时间" >
                                <template style="float: right">
                                    <div class="block">
                                        <el-date-picker
                                                v-model="value2"
                                                type="daterange"
                                                range-separator="至"
                                                start-placeholder="开始日期"
                                                end-placeholder="结束日期"
                                                size="mini">
                                        </el-date-picker>
                                    </div>
                                </template>
                            </el-form-item>
                        </div></el-col>
                    </el-row>
                </div>
            </el-collapse-transition>
            <el-row :gutter="20">
                <el-col :col="24" :offset="19"><div class="grid-content bg-purple-light">
                    <el-button @click="isshow" :icon="isshows ? 'el-icon-arrow-up':'el-icon-arrow-down'">{{isshows? '折叠':'展开' }}</el-button>
                    <el-button icon="el-icon-refresh-left">重置</el-button>
                    <el-button icon="el-icon-search" style="background: #fe8466;color: white">搜索</el-button>
                </div></el-col>
            </el-row>
        </el-form>
        <div style="margin-top: 40px"></div>
        <div id="tab">
            <el-table
                    :data="tableData"
                    border
                    style="width: 100%"
                    @cell-click="up">
                    <el-table-column
                            prop="dat"
                            label="订单编号"
                            width="150"
                    >
                    </el-table-column>
                <el-table-column
                        prop="externalOrder"
                        label="外部订单号"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="orderType"
                        label="订单类型"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="BusinessType"
                        label="业务类型"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="OrderStatus"
                        label="订单状态"
                        width="300">
                </el-table-column>
                <el-table-column
                        prop="ServiceStartTime"
                        label="服务开始时间"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="ServiceEndTime"
                        label="服务结束时间"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="ChangeOrder"
                        label="是否变更订单类型"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="TotalAmount"
                        label="总金额（元）"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="NextPerson"
                        label="下单人姓名"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="NextPersonNum"
                        label="下单人手机号"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="CreationTime"
                        label="创建时间"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="UpdateTime"
                        label="更新时间"
                        width="120">
                </el-table-column>
            </el-table>
        </div>
        <div style="float: right">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :page-sizes="[10, 50, 100]"
                    :page-size="10"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="this.tableData.length">
            </el-pagination>
        </div>
    </div>
</div>
</template>
<script>
export default {
  name: 'cardManagement',
  data () {
    return {
      input: '',
      from: {
        re: '',
        rs: '',
        rd: ''
      },
      isshows: false,
      value1: '',
      value2: '',
      tableData: [{
        dat: '123',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333,
        externalOrder: '11',
        orderType: '11',
        BusinessType: '112',
        OrderStatus: '400',
        ServiceStartTime: '2021-11-05',
        ServiceEndTime: '2021-12-05',
        ChangeOrder: '不',
        TotalAmount: '9000',
        NextPerson: '张三',
        NextPersonNum: '10086',
        CreationTime: '19:00',
        UpdateTime: '22:00'
      },
      {
        dat: '123',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333,
        externalOrder: '11',
        orderType: '11',
        BusinessType: '112',
        OrderStatus: '400',
        ServiceStartTime: '2021-11-05',
        ServiceEndTime: '2021-12-05',
        ChangeOrder: '不',
        TotalAmount: '9000',
        NextPerson: '张三',
        NextPersonNum: '10086',
        CreationTime: '19:00',
        UpdateTime: '22:00'
      }]
    }
  },
  methods: {
    handleSizeChange (val) {
    },
    handleCurrentChange (val) {
    },
    isshow () {
      // eslint-disable-next-line eqeqeq
      if (this.isshows == true) {
        this.isshows = false
      } else {
        this.isshows = true
      }
    },
    up (row) {
      console.log(row)
      this.$router.push('/orderCenter/carManagement/details')
    },
    cson () {
      console.log(1)
    }
  }
}
</script>

<style>
    .inp{
        width: 270px;
    }
    .el-select .el-input {
        width: 270px;
    }
    .el-form-item{
        margin-bottom: 0;
    }
    .el-form-item--mini .el-form-item__label{
        font-size: 1.2rem;
    }
    .block{
        width: 270px;
    }
    .el-form-item__label{
        float: left;
        font-size: 1.2rem;
    }
    .el-form-item--small.el-form-item{
        margin-bottom: 10px;
    }
    #tab{
        margin-top: 20px;
    }
    .el-table{
        border-radius: 10px;
    }
    .el-table--border td:first-child .cell{
        cursor: pointer;
        color: #fe8466;
    }
</style>
